<!-- 加载layout.html -->
{{extend('./layout.html')}}

{{#block('main')}}
<div class="main-container">
	<div class="padding-md">
		<ul class="breadcrumb">
			<li><span class="primary-font"><i class="icon-home"></i></span><a href="index.html"> 主页</a></li>
			<li>学生管理</li>
			<li>学生列表</li>
			<li class="pull-right"><a href="/admin/student/student_add" class="btn btn-primary">添加学生</a></li>
			<li>
				<ul class="nav-notification" style="list-style: none;float:right;">
					<li class="search-list">
						<div class="search-input-wrapper">
							<div class="search-input">
								<input type="text" class="finds" value="{{search}}" placeholder="请输入姓名或手机号">
								<button value="查询" id="search" style="border-radius: 5px;background-color: #3278b3;border: 1px solid  #3278b3;color: white;">查询</button>
							</div>
						</div>	
					</li>
					<div style="clear:both"></div>
				</ul>
				<div style="clear:both"></div>
			</li>
		</ul>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">学生状态</h4>
					</div>
					<div class="form-group">
						<ul class="pagination stater">
							<li class="page-item"><a class="page-link" value="1">在读</a></li>
							<li class="page-item"><a class="page-link" value="2">休学</a></li>
							<li class="page-item"><a class="page-link" value="3">开除</a></li>
							<li class="page-item"><a class="page-link" value="4">已毕业</a></li>
							<li class="page-item"><a class="page-link" value="0">暂无</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<form action="/admin/student/student_deleteAll" method="POST">
			<table class="table table-striped" id="dataTable">
				<thead>
					<tr>
						<th class="text-center">
							<button style="display: block;
							margin: 0 auto;
							margin-bottom: 10px;
							background: #e36159;
							border: 1px solid #df4c43;
							padding: 3px 7px;
							border-radius: 5px;
							color: white;" id="dels">批量删除</button>

							<div class="custom-checkbox">

								<input type="checkbox" id="chkAll" class="inbox-check">
								<label for="chkAll"></label>
							</div>
						</th>

						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>电话</th>
						<th>入学时间</th>
						<th>照片</th>
						<th>班级</th>
						<th>学生状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>

					{{#each(stuList)}}
					<tr studid={{this.stu_id}}>
						<td class="text-center">
						    	<div class="custom-checkbox">
								<input type="checkbox" name="ids[]" value="{{this.stu_id}}" id="chk{{xindex+1}}"
									class="inbox-check">
								<label for="chk{{xindex+1}}"></label>
							</div>
						</td>


						<td>{{xindex+1}}</td>
						<td>{{this.stu_name}}</td>
						<td>{{this.stu_age}}</td>
						<td>{{this.stu_sex===1?'男':'女'}}</td>
						<td>{{this.stu_phone}}</td>
						<td class="stu_time" data-time="{{this.stu_time}}"></td>
						<td><img src="/uploads/{{this.stu_img}}" alt="" style="width: 80px;">
							<div class="gallery-overlay">
								<a href="/uploads/{{this.stu_img}}" class="gallery-action enlarged-photo"><i
										class="fa fa-search-plus fa-lg"></i></a>
							</div>
						</td>
						<td>{{this.class_name}}</td>

						<td><span class="label label-success stat" stdId="{{this.stu_id}}"
								start="{{this.stu_state}}">学生状态</span></td>
						<td>
							<a href="/admin/student/student_edit/{{this.stu_id}}" class="btn btn-success">修改</a>
							<a href="javascript:;" class="btn btn-danger widget-remove-option" id="{{this.stu_id}}"
								ctrname="student">删除</a>
						</td>
					</tr>
					{{/each}}
				</tbody>
			</table>
		</form>
		{{include('./page.html')}}
	</div><!-- /main-container -->
	</br>
	{{/block}}
	<style type="text/css">
		.stater li a {
			margin: 0 30px;
		}

		.stater>li:first-child>a {
			margin-left: 30px;
		}
	</style>
	<script>
		$('#search').on('click', function () {
			var key = $('.finds').val();
			var s1 = location.href = '/admin/student/student_list?key=' + key;
			//  console.log(s1);
		});


		var state = [{ "name": "暂无", "className": "label-default" },
		{ "name": "在读", "className": "label-info" }, { "name": "休学", "className": "label-warning" },
		{ "name": "开除", "className": "label-danger" }, { "name": "毕业", "className": "label-success" }]

		$(".stat").each(function () {
			$(this).attr('class', 'label stat');
			$(this).addClass(state[$(this).attr('start')].className);
			$(this).html(state[$(this).attr('start')].name);
		})

		$(".stat").click(function () {
			$("#myModalLabel").text("学生状态");
			$('#myModal').modal();
			var _this = this;

			$('.page-link').on('click', function () {
				var name = state[$(this).attr("value")].name;
				var stdId = $(_this).attr('stdId');
				$(_this).html(name);
				$(_this).attr('class', 'label stat');
				$(_this).addClass(state[$(this).attr("value")].className);


				var formdata = new FormData();
				formdata.append("state", $(this).attr("value"));
				formdata.append("id", stdId);

				$.ajax({
					url: '/admin/student/studentState',
					type: 'post',
					data: formdata,
					processData: false,
					contentType: false,
					success: function (res) {
					}
				});
				$('.close').click();
			})
		});



		$(function () {
			$('.inbox-check').click(function () {
				var activeRow = $(this).parent().parent().parent();

				activeRow.toggleClass('active');
			});


			$('#inboxCollapse').click(function () {
				$('.inbox-menu-inner').slideToggle();
			});

			$('#chkAll').click(function () {
				if ($(this).prop('checked')) {
					$('.inbox-check').prop('checked', true);
					$('.inbox-check').parent().parent().parent().addClass('active');
				}
				else {
					$('.inbox-check').prop('checked', false);
					$('.inbox-check').parent().parent().parent().removeClass('active');
				}
			});

			$(window).resize(function () {
				if (Modernizr.mq('(min-width: 980px)')) {
					$('.inbox-menu ul').show();
				}
			});
		});




	</script>